<template>
  <div class="invoice-info">
    <header>
      <h2 class="required">
        <slot />
      </h2>
    </header>
    <section>
      <el-form ref="radio-form" :model="form" :rules="radioFormRules">
        <el-form-item label="是否已收到发票" prop="receive_invoice">
          <el-radio-group @change="changeReceiveInvoice" v-model="form.receive_invoice" size="medium">
            <el-radio :label="false">
              否
            </el-radio>
            <el-radio :label="true">
              是
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.receive_invoice" label="本公司是否已财务入账" prop="financial_entry">
          <el-radio-group @change="changeFinancialEntry" v-model="form.financial_entry" size="medium">
            <el-radio :label="false">
              否
            </el-radio>
            <el-radio :label="true">
              是
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div v-if="form.receive_invoice" class="msg">
        <p v-if="!form.financial_entry">退货单提交审核通过后，若未入账，请将发票寄回</p>
        <p v-else>退货单提交审核通过后，若已入账，请开红字通知单，盖章寄回（公章/合同章/财务章）</p>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'InvoiceInfo',
  props: {
    receiveInvoice: {
      type: Boolean,
      default: false
    },
    financialEntry: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        receive_invoice: this.receiveInvoice,
        financial_entry: this.financialEntry
      },
      radioFormRules: {
        receive_invoice: [{ required: true, message: '该项必选', trigger: 'change' }],
        financial_entry: [{ required: true, message: '该项必选', trigger: 'change' }]
      }
    };
  },
  watch: {
    receiveInvoice(nv) {
      this.form.receive_invoice = nv;
    },
    financialEntry(nv) {
      this.form.financial_entry = nv;
    }
  },
  methods: {
    changeReceiveInvoice(val) {
      this.$emit('update:receiveInvoice', val);
    },
    changeFinancialEntry(val) {
      this.$emit('update:financialEntry', val);
    }
  }
};
</script>
<style lang="less">
.invoice-info {
  p {
    color: red;
    line-height: 24px;
  }
}
</style>
